<template>
  <div class="main-content">
    <AsyncSearchTable :columns="columns"
                      :search-items="searchItems"
                      :fetch-data="fetchData">
      <template #status="{ row }">
        <el-tag :type="row.status === '0' ? 'success' : 'danger'">
          {{ row.status === '0' ? '正常' : '停用' }}
        </el-tag>
      </template>
      <template #toolbar>
        <el-button type="primary" :icon="Plus">新增</el-button>
        <el-button type="danger" :icon="Delete">批量删除</el-button>
      </template>
      <template #action-column>
        <el-button type="info" link :icon="View">查看</el-button>
        <el-button type="primary" link :icon="Edit">编辑</el-button>
        <el-button type="danger" link :icon="Delete">删除</el-button>
      </template>
    </AsyncSearchTable>
  </div>
</template>

<script setup lang="ts">
import {useRoute} from 'vue-router'
import {ElMessage} from 'element-plus'
import AsyncSearchTable from '@/components/AsyncSearchTable/index.vue'
import type {TableColumn} from '@/types/table'
import type {SearchItem} from '@/types/search'
import * as http from "@/api/http.ts"
import {Delete, Edit, Plus, View} from "@element-plus/icons-vue";

const route = useRoute()

// 搜索项配置
const searchItems: SearchItem[] = [
  {
    field: 'status',
    label: '状态',
    type: 'select',
    options: [
      {label: '正常', value: '0'},
      {label: '停用', value: '1'}
    ]
  }
]

// 表格列配置
const columns: TableColumn[] = [
  {
    prop: 'typeCode',
    label: '类型编码',
    width: 100,
    align: 'center'
  },
  {
    prop: 'label',
    label: '字典标签',
    width: 120
  },
  {
    prop: 'value',
    label: '字典键值',
    width: 120
  },
  {
    prop: 'sort',
    label: '排序',
    width: 120
  },
  {
    prop: 'status',
    label: '状态',
    width: 120
  },
  {
    prop: 'remark',
    label: '备注',
    width: 100,
  }
]

// 获取字典数据列表
const fetchData = async (params: any) => {
  try {
    const response = await http.get(`/api/dict/data/${route.params.type}`)
    return response.data
  } catch (error) {
    console.error('获取字典数据列表失败:', error)
    ElMessage.error('获取字典数据列表失败')
    return {
      list: [],
      total: 0
    }
  }
}

</script>

<style scoped>
</style>